import React from 'react'
import { Form, Input, Button, DatePicker } from 'antd'
import dayjs from 'dayjs';

interface SearchFunc {
  (searchParams: {key:string, start: string, end: string}):void
}
export default function SearchBar(props: {onSearch: SearchFunc}) {
  const onSearch = (params: {key: string, time?:any[]}) => {
    props.onSearch({
      key: params.key,
      start: params.time? dayjs(params.time[0]).format('YYYY-MM-DD'): '',
      end: params.time? dayjs(params.time[1]).format('YYYY-MM-DD'): ''
    })
  }
  return (
    <Form layout="inline" onFinish={onSearch}>
      <Form.Item
        label="关键字"
        name="key"
      >
        <Input placeholder='请输入关键字'/>
      </Form.Item>
      <Form.Item
        label="关键字"
        name="time"
      >
         <DatePicker.RangePicker />
      </Form.Item>
      <Form.Item>
        <Button htmlType='submit'>搜索</Button>
      </Form.Item>
    </Form>
  )
}
